{include file='common/doc'}
<style>
    .laytable-cell-1-0-5{
        text-align:center;
        height: auto;
        white-space: normal;
    }
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="display: none;">

        </div>
        <div class="layui-card-body">
            <table id="table_list" lay-filter="table_list"></table>
            <template id="table_toolbar">
                <div class="layui-btn-group">
                    <?php echo $operation['toolbar'] ?>
                </div>
            </template>
                <script type="text/html" id="op_table">
                    <?php echo $operation['tool'] ?>
                </script>
            <template  style="display:none" id ="form_template">
                <form action="" class="layui-form" style="margin-top:30px" lay-filter="form" id="form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">等级名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="level_name" placeholder="请输入等级名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">升级规则</label>
                        <div class="layui-input-inline">
                            <select name="level_router" >
                                <option value=""></option>
                                <option value="1">充值</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="router_parameter" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">享受佣金</label>
                        <div class="layui-input-inline">
                            <input type="number" name="brokerage" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">一元 =</label>
                        <div class="layui-input-inline">
                            <input type="number" name="currency_price"  placeholder="币" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">提现金额大于</label>
                        <div class="layui-input-inline">
                            <input type="number" name="withdrawal"  placeholder="元" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">最低充值面值</label>
                        <div class="layui-input-inline">
                            <input type="number" name="min_money" placeholder="元" class="layui-input">
                        </div>
                    </div>
                    <div class="discount">
                        <div class="layui-form-item">
                            <label class="layui-form-label add_discount" >当充值金额大于 <i class="layui-icon layui-icon-add-1" style="cursor: pointer" lgp-event="add"></i><i class="layui-icon layui-icon-delete" style="cursor: pointer" lgp-event="del"></i> </label>
                            <div class="layui-input-inline" style="width: 100px">
                                <input type="number" name="discount[0][money]"  placeholder="元" class="layui-input">
                            </div>
                            <label class="layui-form-label" style="width: 100px">送所充值金额</label>
                            <div class="layui-input-inline" style="width: 100px">
                                <input type="number" name="discount[0][proportion]" placeholder="%" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="form_submit">保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </template>
        </div>
    </div>
</div>
<script src="/layuiadmin/layui/layui.js"></script>
</body>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index' ,'table','authtree','laydate'] ,function () {
        var $ = layui.$
            ,form = layui.form
            ,authtree = layui.authtree
            ,table = layui.table;

        table.render({
            elem: '#table_list'
            ,height: 'full-50'
            ,toolbar: '#table_toolbar'
            ,url: 'read' //数据接口
            ,page: true //开启分页
            ,limit:20
            ,cols: [
                [
                    {type: 'checkbox',fixed: 'left'}
                    ,{field: 'level_name' ,align: "center" ,title: '等级名称'}
                    ,{field: 'currency_price' ,align: "center" ,title: '币价格'}
                    ,{field: 'min_money' ,align: "center" ,title: '最低充值面值'}
                    ,{field: 'withdrawal' ,align: "center" ,title: '提现最小面值'}
                    ,{field: 'discount' ,align: "center" ,title: '优惠',templet:function(d){
                        let list = JSON.parse(d.discount);
                        let html ='';
                        if (Array.isArray(list)){
                            list.forEach(function(item){
                                html+= `<p>充值：${item.money} 赠送：${item.proportion}</p>`;
                            });
                        }
                        return html;
                    }}
                    ,{field: 'level_router' ,align: "center" ,title: '会员规则',templet:function(d){
                        let x =  ['' ,'<span>充值</span>'];
                        return x[d.level_router]+d.router_parameter;
                    }}
                    ,{field: 'brokerage' ,align: "center" ,title: '享受佣金',templet:(d)=>d.brokerage+'%'}
                    ,{title: '操作' ,width: 200 ,align: 'center' ,fixed: 'right' ,toolbar: '#op_table'}
                ]
            ]
        });


        //头工具栏事件
        table.on('toolbar(table_list)' ,function (obj) {
            let event = obj.event;
            var checkStatus = table.checkStatus(obj.config.id);
            if (event == 'add') {
                layer.open({
                    type: 1 ,
                    title: '用户编辑' ,
                    area: ['800px','500px'] ,
                    content: $('#form_template').html() ,
                    success: function (lay ,index) {
                        form.render();
                        discount();
                        form.on('submit(form_submit)' ,function (obj) {
                           let status = request({'url':'add','data':obj.field});
                           if (status){
                               layer.close(index);
                               table.reload('table_list');
                           }
                            return false;
                        });
                    }
                })
            }
            if (event == 'search_sh') {
                $('.layui-card-header').toggle('slow');
            }
        });
        function discount(){
            $('.discount').on('click','i',function(){
                let event = $(this).attr('lgp-event');
                if (event.includes('add')){
                    // 添加
                    let form_item = $(this).parents('.layui-form-item');
                    let new_item = form_item.clone();
                    let input = new_item.find('input')
                    layui.each(input,function(index,item){
                        let name = $(item).attr('name');
                        let count = form_item.parents('.discount').children().length;
                        name = name.replace(/(\d)/,count);
                        $(this).val('');
                        $(this).attr('name',name);
                    });
                    form_item.parents('.discount').append(new_item);
                }
                if (event.includes('del')){
                    // 删除
                }
            });
        }
        table.on('tool(table_list)' ,function (obj) {
            let event = obj.event;
            if (event == 'upd') {
                layer.open({
                    type: 1 ,
                    title: '用户编辑' ,
                    area: ['800px','500px'],
                    content: $('#form_template').html() ,
                    success: function (lay ,index) {
                        form.render();
                        console.log( JSON.parse(obj.data.discount));
                        discount();
                       if ( Array.isArray( JSON.parse(obj.data.discount))){
                           JSON.parse(obj.data.discount).forEach(function(item,index){
                               if(index){
                                   $('.discount').find('i[lgp-event="add"]')[0].click();
                               }
                               obj.data[`discount[${index}][money]`]= item.money;
                               obj.data[`discount[${index}][proportion]`]= item.proportion;
                           });
                       }
                        form.val('form' ,obj.data);
                        form.on('submit(form_submit)' ,function (res) {
                            res.field['level_id'] = obj.data['level_id'];
                            $.post('upd' ,res.field ,function (res) {
                                if (res.code !== 0) {
                                    layer.msg(res.msg);
                                } else {
                                    layer.msg(res.msg);
                                    layer.close(index);
                                    table.reload('table_list');
                                }
                            });
                            return false;
                        });
                    }
                })
            }
            if (event == 'del') {
                console.log(obj);
               let status = request({'url':'del','data':{'level_id':obj.data['level_id']}});
               if (status){
                   obj.del();
               }
            }
        });
        /*搜索*/
        form.on('submit(search)' ,function (obj) {
            layui.laydate.render({
                elem: '#date' //指定元素
            });
            table.reload('table_list' ,{
                method: 'get' ,
                where: obj.field //设定异步数据接口的额外参数
            });
            return false;
        });
    });
</script>
</html>

